{extend name="../../admin/view/main"}

{block name='content'}
<div class="think-box-shadow portal-block-container notselect">
    <div class="layui-row layui-col-space15">
        {include file='guest_flow_chart/index_search'}
    </div>
</div>

<div class="think-box-shadow portal-block-container notselect">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-sm6 layui-col-md3">
            <div class="portal-block-item nowrap" style="background:linear-gradient(-113deg,#D8883D,#C33846)">
                <div>门店数量</div>
                <div>{$shopTotal|default='0'}</div>
                <div>运营门店数量</div>
            </div>
            <i class="portal-block-icon layui-icon layui-icon-home"></i>
        </div>
        <div class="layui-col-sm6 layui-col-md3">
            <div class="portal-block-item nowrap" style="background:linear-gradient(-125deg,#ff7d7d,#fb2c95)">
                <div>总数量</div>
                <div>{$usersTotal|default='0'}</div>
                <div>运营门店进出总数量</div>
            </div>
            <i class="portal-block-icon layui-icon layui-icon-user"></i>
        </div>
        <div class="layui-col-sm6 layui-col-md3">
            <div class="portal-block-item nowrap" style="background:linear-gradient(-113deg,#c543d8,#925cc3)">
                <div>进店数量</div>
                <div>{$comeTotal|default='0'}</div>
                <div>运营门店进店数量</div>
            </div>
            <i class="portal-block-icon layui-icon layui-icon-prev"></i>
        </div>
        <div class="layui-col-sm6 layui-col-md3">
            <div class="portal-block-item nowrap" style="background:linear-gradient(-141deg,#ecca1b,#f39526)">
                <div>出店数量</div>
                <div>{$outTotal|default='0'}</div>
                <div>运营门店出店数量</div>
            </div>
            <i class="portal-block-icon layui-icon layui-icon-next"></i>
        </div>
    </div>
</div>

<div class="layui-row layui-col-space15 margin-top-10">
    <!--用户进/出店数据日对比-->
    <div class="layui-col-xs12 layui-col-md6">
        <div class="think-box-shadow">
            <div id="main1" style="width:100%;height:350px"></div>
        </div>
    </div>
    <!--用户进/出店数据周对比-->
    <div class="layui-col-xs12 layui-col-md6">
        <div class="think-box-shadow">
            <div id="main2" style="width:100%;height:350px"></div>
        </div>
    </div>
    <!--用户进/出店数据月对比-->
    <div class="layui-col-xs12 layui-col-md6">
        <div class="think-box-shadow">
            <div id="main3" style="width:100%;height:350px"></div>
        </div>
    </div>
    <!--当天考勤记录-->
    <div class="layui-col-xs12 layui-col-md6">
        <div class="think-box-shadow">
            <div id="main4" style="width:100%;height:350px"></div>
        </div>
    </div>
    <!--性别分布-->
    <div class="layui-col-xs12 layui-col-md6">
        <div class="think-box-shadow">
            <div id="main6" style="width:100%;height:350px"></div>
        </div>
    </div>
    <!--用户年龄-->
    <div class="layui-col-xs12 layui-col-md6">
        <div class="think-box-shadow">
            <div id="main7" style="width:100%;height:350px"></div>
        </div>
    </div>
    <!--访问用户数-->
    <!--<div class="layui-col-xs12 layui-col-md12">-->
        <!--<div class="think-box-shadow">-->
            <!--<div class="user-line-btn">-->
                <!--<div id="at">本月</div>-->
                <!--<div id="prev">上月</div>-->
            <!--</div>-->
            <!--<div id="main8" style="width:100%;height:350px"></div>-->
        <!--</div>-->
    <!--</div>-->
    <!--<div class="layui-col-xs12 layui-col-md12">-->
        <!--<div class="think-box-shadow">-->
            <!--<div id="main5" style="width:100%;height:350px"></div>-->
        <!--</div>-->
    <!--</div>-->

</div>

<label class="layui-hide">
    <textarea id="jsondata1">{$userDayCompare|json_encode}</textarea>
    <textarea id="jsondata2">{$userWeekCompare|json_encode}</textarea>
    <textarea id="jsondata3">{$userMonthCompare|json_encode}</textarea>
    <!--<textarea id="jsondata4">{$shopList|json_encode}</textarea>-->
    <input id="normal" type="text" value="{$normal}">
    <input id="abnormal" type="text" value="{$abnormal}">
    <input id="official" type="text" value="{$official}">
    <!--性别分布-->
    <input id="genderData" type="text" value="{$genderData}">
    <!--用户年龄-->
    <input type="text" id="ageData" value="{$ageData}">
</label>

<!--<style>-->
    <!--.user-line-btn {-->
        <!--width: 100%;-->
        <!--display: flex;-->
        <!--justify-content: flex-end;-->
    <!--}-->
    <!--.user-line-btn div {-->
        <!--padding: 3px 5px;-->
        <!--cursor:pointer-->
    <!--}-->
    <!--.user-line-btn div:nth-child(1){-->
        <!--background-color: #6FFF8C;-->
        <!--margin-right:20px;-->
    <!--}-->
    <!--.user-line-btn div:nth-child(2){-->
        <!--background-color: #31F5FF;-->
    <!--}-->
<!--</style>-->

<script>
    // var date = [];
    // var num = [];
    // userData('at');
    // $('#at').click(function () {
    //     userData('at');
    // });
    // $('#prev').click(function () {
    //     userData('prev');
    // });
    //获取访问用户数
    // function userData(value) {
    //     $.ajax({
    //         'url': '{:url("admin/GuestFlowChart/getUserData")}',
    //         'type': 'get',
    //         'dataType': 'json',
    //         'data': {
    //             'time': value
    //         },
    //         'success': res => {
    //             var list = res.data;
    //             date = list.map(item => {
    //                 return item.date;
    //             }).join(',').split(',');
    //             num = list.map(item => {
    //                 return item.total;
    //             }).join(',').split(',');
    //             showUserLine(date, num);
    //         }
    //     });
    // }

    require(['echarts'], function (echarts) {
        var official = $('#official').val();
        //日对比
        var userDayCompare = JSON.parse($('#jsondata1').html());
        var chart1 = echarts.init(document.getElementById('main1'));
        window.addEventListener("resize", function () {
            chart1.resize()
        });
        chart1.setOption({
            title: {text: '用户' + official + '店日数据对比', left: 'center'},
            legend: {orient: 'vertical', left: 'left'},
            tooltip: {trigger: 'item', formatter: '{a} <br/>{b} : {c} 人 ( {d}% )'},
            series: [
                {
                    name: official + '店数据',
                    type: 'pie',
                    radius: '60%',
                    center: ['50%', '55%'],
                    data: userDayCompare,
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        });
        //周对比
        var userWeekCompare = JSON.parse($('#jsondata2').html());
        var chart2 = echarts.init(document.getElementById('main2'));
        window.addEventListener("resize", function () {
            chart2.resize()
        });
        chart2.setOption({
            title: {text: '用户' + official + '店周数据对比', left: 'center'},
            legend: {orient: 'vertical', left: 'left'},
            tooltip: {trigger: 'item', formatter: '{a} <br/>{b} : {c} 人 ( {d}% )'},
            series: [
                {
                    name: official + '店数据',
                    type: 'pie',
                    radius: '60%',
                    center: ['50%', '55%'],
                    data: userWeekCompare,
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        });
        //月对比
        var userMonthCompare = JSON.parse($('#jsondata3').html());
        var chart3 = echarts.init(document.getElementById('main3'));
        window.addEventListener("resize", function () {
            chart3.resize()
        });
        chart3.setOption({
            title: {text: '用户' + official + '店月数据对比', left: 'center'},
            legend: {orient: 'vertical', left: 'left'},
            tooltip: {trigger: 'item', formatter: '{a} <br/>{b} : {c} 人 ( {d}% )'},
            series: [
                {
                    name: official + '店数据',
                    type: 'pie',
                    radius: '60%',
                    center: ['50%', '55%'],
                    data: userMonthCompare,
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        });
        //考勤统计
        var normal = $('#normal').val();
        var abnormal = $('#abnormal').val();
        var chart4 = echarts.init(document.getElementById('main4'));
        window.addEventListener("resize", function () {
            chart4.resize()
        });
        chart4.setOption({
            title: {text: '当天考勤记录', left: 'center'},
            legend: {orient: 'vertical', left: 'left'},
            tooltip: {trigger: 'item', formatter: '{a} <br/>{b} : {c} 人 ( {d}% )'},
            series: [
                {
                    name: '当天考勤记录',
                    type: 'pie',
                    radius: '60%',
                    center: ['50%', '55%'],
                    data: [
                        {value:normal, name:'正常'},
                        {value:abnormal, name:'异常'},
                    ],
                    color : [  'green', 'red' ],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        });
        //柱状图
        //var shopList = JSON.parse($('#jsondata4').html());
        // var shopName = shopList.map(item => {
        //     return item.name;
        // }).join(',').split(',');
        // var shopTotal = shopList.map(item => {
        //     return item.total;
        // }).join(',').split(',');
        // var chart5 = echarts.init(document.getElementById('main5'));
        // window.addEventListener("resize", function () {
        //     chart5.resize()
        // });
        // var option = {
        //     title: {
        //         text: '门店人流统计'
        //     },
        //     tooltip: {},
        //     legend: {
        //         data: ['进/出数量']
        //     },
        //     xAxis: {
        //         data: shopName,
        //         axisLabel: {
        //             interval:0,
        //             rotate:'25',
        //             fontSize: 12
        //         }
        //
        //     },
        //     yAxis: {},
        //     series: [{
        //         name: '进/出数量',
        //         type: 'bar',
        //         data: shopTotal
        //     }]
        // };
        // chart5.setOption(option);
        //性别分布
        var chart6 = echarts.init(document.getElementById('main6'));
        var genderData = $('#genderData').val();
        option6 = {
            title: {'text': '性别分布', left: 'center'},
            tooltip: {
                trigger: 'item'
            },
            legend: {orient: 'vertical', left: 'left'},
            series: [
                {
                    name: '性别分布',
                    type: 'pie',
                    radius: ['40%', '70%'],
                    avoidLabelOverlap: false,
                    label: {
                        show: false,
                        position: 'center',
                        formatter: '{b} : {c} ({d}%)'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: '20',
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: eval(genderData)
                }
            ]
        };
        chart6.setOption(option6);
        //用户年龄
        var chart7 = echarts.init(document.getElementById('main7'));
        var ageData = $('#ageData').val();
        var datas = eval(ageData);
        option7 = {
            title: {text: '年龄分布', left: 'center'},
            legend: {orient: 'vertical', left: 'left'},
            series: datas.map(function (data) {
                return {
                    type: 'pie',
                    radius: [20, 60],
                    height: '100%',
                    left: 'center',
                    width: 500,
                    itemStyle: {
                        borderColor: '#fff',
                        borderWidth: 1
                    },
                    label: {
                        alignTo: 'edge',
                        formatter: '{name|{b}}\n{time|{c}}({d}%)',
                        minMargin: 5,
                        edgeDistance: 80,
                        lineHeight: 15,
                        rich: {
                            time: {
                                fontSize: 10,
                            }
                        }
                    },
                    labelLine: {
                        length: 15,
                        length2: 0,
                        maxSurfaceAngle: 80
                    },
                    data: data
                }
            })
        };
        chart7.setOption(option7);
    });

    // function showUserLine(date, num){
    //     require(['echarts'], function (echarts) {
    //         //客流数
    //         var chart8 = echarts.init(document.getElementById('main8'));
    //         option8 = {
    //             title: {text: '客流数'},
    //             tooltip: {},
    //             xAxis: {
    //                 type: 'category',
    //                 data: date
    //             },
    //             yAxis: {
    //                 type: 'value'
    //             },
    //             series: [{
    //                 data: num,
    //                 type: 'line'
    //             }]
    //         };
    //         chart8.setOption(option8);
    //     });
    // }

</script>

{/block}
